<template>
    <div class="login">
    
        <!-- 头部 -->
        <van-nav-bar   left-arrow @click-left="$router.back()">
            <template #title>
                <span>登录</span>
            <router-link to="/reg"><span>/注册</span></router-link>   
            </template>
        </van-nav-bar>
            <!-- 登录 -->
            <van-form @submit="onSubmit">
              <!-- /^1[3-9\d{9}$/   第一位是1 第二位 是3到9 后面九位是数字 \d 是数字的意思--->
            <van-field
                v-model="username"
                name="username"
                label="手机号"
                placeholder="请填写手机号"
                :rules="[{ required: true, message: '请填写手机号'},{pattern:/^1[3-9]\d{9}$/,message:'手机格式错误'}]"
            />
            
            <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' },{validator:(e=> /^\w{6,12}$/.test(e)),message: '密码格式错误。需要6到12位的字母或数字'}]"
            />
             <van-button type="primary" size="mini" to="/forget" style="float: right;margin: 10px 20px;">忘记密码</van-button>
             <van-button type="primary" size="mini" to="/reg" style="float: right;margin: 10px 20px;">去注册</van-button>
            <div style="margin: 16px;">
                <van-button square block color="#07c160" type="info" native-type="submit">提交</van-button>
            </div>
           
            </van-form>
                  
    </div>
</template>
<style lang="less">
body{
    background: #f7f8fa;
}
.login .login-yz{
    position: absolute;
    right: 15px;
    top: 140px;
}
.login .login-yz p{
    text-align: center;
    font-size: 13px;
    line-height: 10px;
    color: #666666;
}
.login .login-dl{

    // margin-top: 50px;
    margin: 60px 25px;
    height: 45px;
    background: @green;
}
.login .login-dl p{
    text-align: center;
    color: #fff;
    line-height: 43px;
}
.login .van-nav-bar__title a{
    color: #fff;
}



</style>
<script>
import { NavBar,Field,Form , Button} from 'vant';
import { login } from '@/api/user';
export default {
components:{
    [NavBar.name]:NavBar,
    [Field.name]:Field,
    [Form.name]:Form,
    [Button.name]:Button,
},
     data() {
    return {
      username: '',
      password: '',
    };
  },
  methods:{
    onSubmit(values) {
      console.log('submit', values);
        login(values).then(res=>{
            console.log(res)
            if(res.code==0){
             //succes 
             //把uid token userInfo 存储到本地储存
            let {token} = res;
            localStorage.setItem('token',token)
            // localStorage.setItem('uid',uid) 
            // localStorage.setItem('userInfo',JSON.stringify(userInfo))

             this.$store.dispatch('getUserInfo',token)

            setTimeout(v=>{
                this.$router.back()
            },500)  
            
            
            }else{
                this.$toast(res.msg||'登录失败')
            }
        })
    }
  },
}

    



</script>